<div class="x-nav">
  <span class="layui-breadcrumb">
    <a>我的账本</a>
    <a><cite>其他支出</cite></a>
  </span>
  <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()"
    title="刷新">
    <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
  </a>
</div>
<div class="layui-row layui-col-space15">
  <div class="layui-col-md12">
    <div class="layui-card">
      <div class="layui-card-body ">
        <form class="layui-form layui-col-space5" lay-filter="formData">
          <div class="layui-input-inline layui-show-xs-block">
            <select name="property" lay-filter="select">
              {foreach $properties as $v}
              <option value="{$v.id}" {if $house_property_id==$v.id}selected{/if}>{$v.name}</option>
              {/foreach}
            </select>
          </div>
        </form>
        <table class="layui-table" id="dataGrid" lay-filter="grid"></table>
      </div>
    </div>
  </div>
</div>

<script type="text/html" id="barDemo">
  {{#  if(d.accout_mark == 'N'){ }}
  <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;</i>编辑</a>
  <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="account"><i class="layui-icon">&#xe642;</i>到账</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon">&#xe640;</i>删除</a>
  {{#  } else { }}
  {{#  } }}
</script>
<script type="text/html" id="toolbarDemo">
  <div class = "layui-btn-container" > 
      <button class = "layui-btn layui-btn-sm" lay-event="add">
        <i class="layui-icon"></i>新增</button>
  </div > 
</script>
<script type="text/html" id="numberTpl">
  {{# if(d.number_name == null){ }}
    整栋
  {{# } else { }}
    {{ d.number_name }}
  {{# }}}
</script>
<script type="text/html" id="typeTpl">
  {{# if(d.type == 'D'){ }}
    维修费
  {{# } else if(d.type == 'E') { }}
    工资
  {{# } else if(d.type == 'F') { }}
    其他
  {{# } else { }}
  {{# }}}
</script>

<script>
  layui.use(['table', 'form'],
    function () {
      var table = layui.table;
      var form = layui.form;

      // 首次加载
      table.render({
        elem: '#dataGrid'
        , height: 'full'
        , url: './query.html' //数据接口
        , toolbar: '#toolbarDemo'
        , defaultToolbar: []
        , page: true //开启分页
        , cols: [[ //表头
          { field: 'id', title: 'ID', hide: true }
          , { field: 'property_name', title: '房产' }
          , { field: 'number_name', title: '房号', templet: '#numberTpl', unresize: true }
          , { field: 'type', title: '类型', templet: '#typeTpl', unresize: true }
          , { field: 'total_money', title: '金额' }
          , { field: 'accounting_date', title: '时间', minWidth: 110 }
          , { field: 'note', title: '备注', minWidth: 110 }
          , { field: 'right', title: '操作', toolbar: '#barDemo', minWidth: 266 }
        ]]
      });

      //表头工具栏事件
      table.on('toolbar(grid)', function (obj) {
        switch (obj.event) {
          case 'add':
            var formData = form.val("formData");
            xadmin.open('新增房号', 'edit.html?house_property_id=' + formData.property, '', '', true);
            break;
        };
      });

      // 编辑、删除事件
      //监听行工具条
      table.on('tool(grid)', function (obj) {
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var tr = obj.tr; //获得当前行 tr 的DOM对象
        switch (layEvent) {
          case 'edit':// 编辑
            xadmin.open('编辑权限', 'edit.html?id=' + data.id + '&house_property_id=' + data.house_property_id, '', '', true);
            break;
          case 'del':// 删除
            layer.confirm('确认要删除吗？', function () {
              main.ajaxPost(
                {
                  url: "{:url('delete')}",
                  data: { "id": data.id },
                },
                function (data) {
                  table.reload('dataGrid'); //只重载数据
                }
              )
            });
            break;
          case 'account':
            if (data.number_name) {
              var names = data.number_name;
            } else {
              var names = '整栋';
            }
            layer.confirm(names + '的' + data.total_money + '元已到账？', {
              btn: ['确定'] //按钮
            }, function () {
              main.ajaxPost(
                {
                  url: "{:url('account')}",
                  data: { "id": data.id },
                },
                function (data) {
                  table.reload('dataGrid'); //只重载数据
                }
              );
            });
            break;
        };
      });

      // 查询重新加载
      form.on('select(select)', function (data) {
        table.reload('dataGrid', {
          url: './query.html'
          , where: { //设定异步数据接口的额外参数，任意设
            house_property_id: data.value
          }
          , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
            curr: 1 //设定初始在第 5 页
          }
        }); //只重载数据
      });
    });
  function getNowFormatDate() {
    var date = new Date();
    var seperator1 = "-";
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var strDate = date.getDate();
    if (month >= 1 && month <= 9) {
      month = "0" + month;
    }
    if (strDate >= 0 && strDate <= 9) {
      strDate = "0" + strDate;
    }
    var currentdate = year + seperator1 + month + seperator1 + strDate;
    return currentdate;
  }
</script>